<footer
  class="text-sm md:text-base p-6 border-t-3 border-black text-center bg-blue text-white"
>
  <div class="max-w-6xl mx-auto text-center">
    <div class="flex flex-wrap justify-center gap-2 mb-4">
      <a
        href="/rss.xml"
        class="border-3 border-black px-4 py-2 bg-background text-black shadow-neo hover:shadow-none hover:translate-y-0.5 transition-all flex items-center gap-2"
        title="Subscribe to RSS"
        aria-label="Subscribe to RSS"
      >
        <img src="/rss.svg" alt="RSS" class="w-4 h-4" />
        <span class="hidden sm:inline">RSS</span>
      </a>
      <a
        href="/why-arch"
        target="_blank"
        class="border-3 border-black px-4 py-2 bg-secondary text-black shadow-neo hover:shadow-none hover:translate-y-0.5 transition-all"
      >
        Why Arch Linux?
      </a>
      <a
        href="/touch-grass"
        target="_blank"
        class="border-3 border-black px-4 py-2 bg-green text-white shadow-neo hover:shadow-none hover:translate-y-0.5 transition-all text-center group min-w-72"
        ><span class="block group-hover:hidden">Touch Grass</span>
        <span class="hidden group-hover:block">(Seriously, Go Outside)</span></a
      >
    </div>

    <div class="mt-6 text-sm">
      <h3 class="text-2xl font-bold mb-2">陈刑's TECH GUIDES</h3>
      <p class="font-bold">
        © 2025 | <a
          class="underline hover:text-gray-300"
          href="https://github.com/chenxing-dev">CHENXING.DEV</a
        >
      </p>
    </div>
  </div>
</footer>
